<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Bulles</title>
    <style type="text/css">
		body {
		  font: 14px Helvetica Neue;
		  text-rendering: optimizeLegibility;
		  margin-top: 1em;
		  overflow-y: scroll;
		}
		.gallery {
		  position: relative;
		  left: 20px;
		  width: 970px;
		}
		circle {
		  stroke: #fff;
		  stroke-width: 1.5px;
		}
		text {
		  font: 10px sans-serif;
		}
    </style>	
    <script type='text/javascript' src='../js/d3.V2.js' ></script>
  </head>

  <body>
    <div class="body">
      <div class="content">
		<h1 id='bubble_chart'>Bubble Chart</h1><a href='<?php echo $this->urlStats; ?>'>DATA</a>
		<div class='gallery' id='chart'> </div>


      </div>

	<p>Merci beaucoup à <a href='http://mbostock.github.com/d3/ex/bubble.html'>Mike Bostock</a>.</p>
  </div>

	<script type='text/javascript'>
		var r = 960,
		    format = d3.format(",d"),
		    fill = d3.scale.category20c();
		
		var bubble = d3.layout.pack()
		    .sort(null)
		    .size([r, r]);
		
		var vis = d3.select("#chart").append("svg")
		    .attr("width", r)
		    .attr("height", r)
		    .attr("class", "bubble");
		
		d3.json("<?php echo $this->urlStats; ?>", function(json) {
			  var node = vis.selectAll("g.node")
			    .data(bubble.nodes({children: json})
			    		.filter(function(d) { return !d.children; }))
			    .enter().append("g")
			      .attr("class", "node")
			      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

			  node.append("title")
			      .text(function(d) { return d.code + ": " + format(d.value); });

			  node.append("circle")
			      .attr("r", function(d) { return d.r; })
			      .style("fill", function(d) { return fill(d.value); });

			  node.append("text")
			      .attr("text-anchor", "middle")
			      .attr("dy", ".3em")
			      .text(function(d) {
				      var test = d; 
				      return d.code.substring(0, d.r / 3); 
				      });
			});
	</script>

  </body>
</html>
